<template>
  <!-- 搜索栏部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <!-- model 绑定表单数据 -->
      <el-form :inline="true" :model="querySpe" class="demo-form-inline">
        <el-form-item label="规格名称">
          <el-input v-model="querySpe.speName" placeholder="规格名称"/>
        </el-form-item>

        <el-form-item label="状态">
          <el-select
              style="width: 100px"
              v-model="querySpe.status"
              placeholder="选择状态"
          >
            <el-option value="0" :selected="true" label="全部"/>
            <el-option value="1" label="正常"/>
            <el-option value="2" label="废弃"/>
            <el-option value="99" label="删除"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="loadSeps">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 搜索栏部分结束 -->

  <!-- 工具栏部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="新增规格"
          placement="top-start"
      >
        <el-button @click="showAddSpeWin" type="primary">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
        <el-icon>
          <EditPen/>
        </el-icon>
      </el-button>
      <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                     @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
        <template #reference>
          <el-button :disabled="deleteBtnDisabled" type="primary">
            <el-icon>
              <Minus/>
            </el-icon>
          </el-button>
        </template>
      </el-popconfirm>
    </el-col>
  </el-row>
  <!-- 工具栏部分结束 -->

  <!-- 列表部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-table ref="speTable" @selection-change="handleSelectionChange" :data="spes" border :stripe="true"
                style="width: 95%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="speId" label="#"/>
        <el-table-column prop="speName" label="规格名称">
          <template #default="scope">
            <el-link @click="showSpeItemWin(scope.row)" type="success">{{scope.row.speName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status == 2">废弃</el-tag>
            <el-tag type="danger" v-else>删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="180" prop="createTime" label="创建时间"/>
        <!-- 行工具栏 -->
        <el-table-column width="140" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="toEditDict(scope.row.dictId)" size="small">编辑</el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteDict(scope.row.dictId)" title="您确定要删除这个字典信息吗？">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 列表部分结束 -->

  <!-- 分页部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                     :total="total"/>
    </el-col>
  </el-row>
  <!-- 分页部分结束 -->


  <!-- 新增商品的弹窗 -->
  <el-dialog title="新增商品规格" v-model="speAdd.addWinDialogVisible" >
    <el-form :model="speAdd.spe" label-width="auto" >
      <el-form-item label="规格名称">
        <el-input v-model="speAdd.spe.speName" placeholder="规格名称"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hideAddSpeWin">取消</el-button>
        <el-button type="primary" @click="addSpeSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 规格项相关 -->
  <!-- 规格项管理弹窗 -->
  <el-dialog title="规格项管理" v-model="speItem.itemDilogVisible" >
    <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="新增规格项"
            placement="top-start"
        >
          <el-button @click="showAddSpeItemWin" type="primary">
            <el-icon>
              <Plus/>
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
          <el-icon>
            <EditPen/>
          </el-icon>
        </el-button>
        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                       @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
          <template #reference>
            <el-button :disabled="deleteBtnDisabled" type="primary">
              <el-icon>
                <Minus/>
              </el-icon>
            </el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>
    <!-- 工具栏部分结束 -->
    <!-- 列表开始 -->
    <el-table :data="speItem.speItems" border :stripe="true" style="width: 95%">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="speItemId" label="#"/>
      <el-table-column prop="speItemText" label="文本"/>
      <el-table-column prop="speItemImg" label="图片">
        <template #default="scope">
          <el-image :src="scope.row.speItemImg" style=" height: 100px;"/>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status == 2">废弃</el-tag>
          <el-tag type="danger" v-else>删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="180" prop="craeteTime" label="创建时间"/>
      <!-- 行工具栏 -->
      <el-table-column width="140" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="toEditDict(scope.row.dictId)" size="small">编辑</el-button>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                         @confirm="deleteDict(scope.row.dictId)" title="您确定要删除这个字典信息吗？">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表结束 -->
    <!-- 新增规格项弹窗 -->
    <el-dialog title="新增规格项" width="500" v-model="speItem.speItemAddDilogVisible" >
      <el-form :model="speItem.speItem" label-width="auto" >
        <el-form-item label="规格项文本">
          <el-input v-model="speItem.speItem.speItemText" placeholder="规格项文本"/>
        </el-form-item>
        <el-form-item label="规格项图片">
          <el-upload
              class="avatar-uploader"
              :action="imageUpLoadUrl"
              name="file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="hideAddSpeItemWin">取消</el-button>
            <el-button type="primary" @click="addSpeItemSubmit">
              提交
            </el-button>
          </div>
        </template>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="hidSpeItemWin">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script>

import speRequest from '../../api/spe.js';
import config from '../../util/config.js';

export default {
  data(){
    return{
      spes:[],// 商品规格列表
      total:0,// 总记录数
      currentPage:1,// 当前页码
      limit:10,// 每页记录数
      querySpe:{},// 查询条件对象

      speAdd:{
        addWinDialogVisible:false,// 新增商品规格弹窗标志
        spe:{},// 封装新增商品规格对象
      },

      currentSpe:undefined,// 当前操作的规格对象
      imageUpLoadUrl: config.baseUrl + "/cms/upload/image",// 图片上传的url
      imageUrl:undefined,// 图片地址

      speItem:{
        itemDilogVisible:false,// 规格项管理弹窗标志
        speItems:[],// 规格项列表
        speItemAddDilogVisible:false,// 规格项新增弹窗标志
        speItem:{},// 封装新增规格项对象
      }
    }
  },methods:{
    /**
     * 图片上传成功的回调函数
     */
    handleAvatarSuccess(res){
      this.imageUrl = res.data;
    },
    /**
     * 新增规格项提交按钮事件
     */
    addSpeItemSubmit(){
      // 设置图片
      this.speItem.speItem.speItemImg = this.imageUrl;
      this.speItem.speItem.speId = this.currentSpe.speId;
      // 提交数据
      speRequest.saveSpeItem(this.speItem.speItem,res=>{
        if(res.code == 200){
          this.$message({
            message: '新增规格项成功',
            type: 'success'
          });
          // 关闭新增规格项的弹窗
          this.hideAddSpeItemWin();
          // 刷新列表
          this.loadSpeItems(this.currentSpe.speId);
        }else{
          this$message({
            message: '新增规格项失败',
            type: 'error'
          });
        }
      });
    },
    /**
     * 关闭新增规格项的弹窗
     */
    hideAddSpeItemWin(){
      this.speItem.speItemAddDilogVisible = false;
      this.speItem.speItem = {};
    },
    /**
     * 新增规格项的弹窗
     */
    showAddSpeItemWin(){
      this.speItem.speItemAddDilogVisible = true;
    },
    /**
     * 关闭规格项的弹窗
     */
    hidSpeItemWin(){
      this.speItem.itemDilogVisible = false;
      this.currentSpe = undefined;
    },
    /**
     * 跳转到商品规格项列表页面
     */
    showSpeItemWin(spe){
      this.currentSpe = spe;
      this.speItem.itemDilogVisible = true;
      // 根据speId加载规格项列表
      this.loadSpeItems(spe.speId);
    },
    /**
     * 加载规格项列表
     * @param speId
     */
    loadSpeItems(speId){
      speRequest.listSpeItem(speId,res=>{
        this.speItem.speItems = res.data;
      });
    },
    /**
     * 新增商品规格
     */
    addSpeSubmit(){
      // 直接添加
      speRequest.saveSpe(this.speAdd.spe,res=>{
        if(res.code == 200){
          this.$message({
            message: '新增商品规格成功',
            type: 'success'
          });
          // 关闭新增商品的弹窗
          this.hideAddSpeWin();
          // 刷新列表
          this.loadSeps();
        }else{
          this.$message({
            message: '新增商品规格失败',
            type: 'error'
          });
        }
      });
    },
    /**
     *
     */
    showAddSpeWin(){
      this.speAdd.addWinDialogVisible = true;
    },
    hideAddSpeWin(){
      this.speAdd.addWinDialogVisible = false;
      this.speAdd.spe = {};
    },
    /**
     *
     * @param value
     */
    pageChange(value){
      this.currentPage = value;
      this.loadSeps();
    },
    /**
     * 加载所有的商品规格
     */
    loadSeps(){
      // 设置参数
      this.querySpe.page = this.currentPage;
      this.querySpe.limit = this.limit;
      speRequest.listSpe(this.querySpe,res=>{
        this.spes = res.data.records;
        this.total = res.data.total;
      })
    }
  },mounted() {
    this.loadSeps()
  }
}
</script>
<style scoped>

</style>